<template>
  <view class="like-button" :class="{ clicked: clicked }" @click="handleClick">
    <img :src="imageSrc" alt="Static Image" id="static-image"></img>
  </view>
</template>

<script>
export default {
  data() {
    return {
      clicked: false,
      imageSrc: "../../static/icon/pages/static.png"
    };
  },
  methods: {
    handleClick() {
      this.clicked = !this.clicked;

      if (this.imageSrc.endsWith("../../static/icon/pages/static.png")) {
        this.imageSrc = "../../static/icon/pages/hover.png";
      } else {
        this.imageSrc = "../../static/icon/pages/static.png";
      }

      this.$emit("like-clicked", this.clicked);
    }
  }
};
</script>

<style scoped>
.like-button {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s;
}

.like-button.clicked {
  transform: scale(1.2);
}
.like-button img{
	width: 100rpx;
	height: 100rpx;
}
</style>
